<template>
	<view>
		<uv-navbar :safeAreaInsetTop="true" :placeholder="true" :fixed="true">

			<template v-slot:left>
				<uv-search readonly @click="toSearch" searchIcon="search" :disabled="true" :showAction='false'>
					<template v-slot:prefix>
						<uv-icon name="arrow-down" label="全国" label-pos="left" @click="tolocal"></uv-icon>
					</template>
				</uv-search>

			</template>
		</uv-navbar>
		<uv-tabs :list="tablist" @change="tabsChange" :lineWidth="40"
			:customStyle="{BackgroundColor: '#fff', MarginTop: '5px'} " :scrollable="false"
			:itemStyle="{height:'55px',FontSize:'22px'}"></uv-tabs>
		<uv-cell-group>
			<uv-cell icon="volume" :title="`当前剩余免费加群名额：${groupCount.total}`" isLink :customStyle="customStyle"
				:titleStyle="customStyle" :rightIconStyle="customStyle" :iconStyle="customStyle"
				url="/pages/group/packages">
				<template v-slot:value>
					<text style="color: #ff3600;">去充值</text>
				</template>
			</uv-cell>
		</uv-cell-group>

		<fy-group-item v-if="queryForm.type!=4" v-for="item in currGroup" :key="item.id" :info="item"></fy-group-item>
		<fy-group-item v-if="queryForm.type==4" v-for="item in selfGroup" :key="item.id" :info="item"></fy-group-item>


	</view>
</template>

<script>
	import {
		getChatGroupList,
		getSelfGroupList,
		getSelfGroupCountInfo,
		addToGroup
	} from '@/utils/http.js'
	import baseconfig from '@/config.js'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				list: [
					{ name: '全国群', type: 1 },
					{ name: '车型群', type: 2 },
					{ name: '已关注', type: 4, badge: { value: 0 } }
				],
				queryForm: {
					start: 0,
					length: 10,
					type: 1,
				},
				currGroup: [],
				customStyle: {
					BackgroundColor: '#ecf5ff',
					color: '#3d9eff'
				},
				selectTab: {
					index: 0,
					type: 1
				}
			}
		},
		onLoad() {
			this.fetchData()
		},
		onShow() {
			this.$store.dispatch('socket/updateTabbarBadge')
		},
		computed: {
			...mapState({
				token: state => state.user.token,
				selfGroup: state => state.user.selfGroup,
				groupCount: state => state.user.groupCount
			}),
			tablist() {
				var tem = this.list
				tem[2].badge.value = this.selfGroup.length
				return tem
			},
		},
		methods: {
			tolocal() {
				uni.navigateTo({
					url: "/pages/search/plate?tab=3"
				})
			},
			toSearch() {
				uni.navigateTo({
					url: "/pages/search/search?tab=3"
				})
			},
			tabsChange(e) {
				this.queryForm.type = e.type
				this.currGroup = []
				this.queryForm.start = 0
				if (this.queryForm.type != 4) {
					this.fetchData()
				}

			},

			fetchData() {
				getChatGroupList(this.queryForm).then(res => {
					const { data, total, rows, count } = res.data
					rows.forEach(arr => {
						arr.avatar = baseconfig.api_url + arr.imgsrc
						arr.img_contact = baseconfig.api_url + arr.contacts

					})
					this.currGroup = rows
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.group-box {
		display: flex;
		flex-direction: row;
		margin: 5px;
		background-color: #fff;
		padding: 10px;
		align-items: center;

		&_conten {
			flex: 1;
			padding-left: 10px;

		}

		&_right {
			width: 60px;
			text-align: center;
		}
	}

	.popup-group-box {
		padding: 20px;

		.uv-text {
			margin-top: 15px;
		}

		&_title {
			margin-top: 10px;
		}

		&_content {
			text-align: center;

			image {
				width: 200px;
				height: 200px;
				margin: 15px auto;
			}
		}
	}
</style>